<template>
  <div class="app-container">
    <div class="container_box">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="分錄類型" prop="entryType">
                  <el-select
                    style="width: 100%"
                    v-model="form.entryType"
                    placeholder="請選擇分錄類型"
                    @change="entryTypeChange"
                  >
                    <el-option
                      v-for="dict in dict.type.account_entry_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="會計科目(借)" prop="JaccountSubject">
                  <el-cascader
                    style="width: 100%"
                    :options="accountSubjectArr"
                    filterable
                    :props="{
                      expandTrigger: 'hover',
                      value: 'dictValue',
                      label: 'name',
                      children: 'children',
                    }"
                    @change="queryASHandleChangeJ"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="會計科目(貸)" prop="DaccountSubject">
                  <el-cascader
                    style="width: 100%"
                    :options="accountSubjectArr"
                    filterable
                    :props="{
                      expandTrigger: 'hover',
                      value: 'dictValue',
                      label: 'name',
                      children: 'children',
                    }"
                    @change="queryASHandleChangeD"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="摘要" prop="summary">
                  <el-input v-model="form.summary" placeholder="請輸入摘要" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="會計賬期" prop="accountingPeriod">
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.accountingPeriod"
                    value-format="yyyyMM"
                    type="month"
                    @input="$forceUpdate()"
                    placeholder="請選擇會計賬期"
                  >
                  </el-date-picker>

                  <!-- <el-date-picker
                    style="width: 100%"
                    clearable
                    v-model="form.accountingPeriod"
                    type="date"
                    value-format="yyyyMM"
                    placeholder="請選擇會計賬期"
                  >
                  </el-date-picker> -->
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="銀行id" prop="bankId">
                  <el-input v-model="form.bankId" placeholder="請輸入賬戶ID" />
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="BankNo_name" prop="BankNo">
                  <el-input
                    disabled
                    v-model="form.BankNo"
                    placeholder="請選擇賬銀行賬號"
                  >
                    <el-button
                      slot="append"
                      @click="open_dialog_bank"
                      icon="el-icon-search"
                    ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="BankName_name" prop="BankAccount">
                  <el-input
                    disabled
                    v-model="form.BankAccount"
                    placeholder="請輸入賬戶名稱"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="金額" prop="amount">
                  <el-input v-model="form.amount" placeholder="請輸入金額" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="備註" prop="remark">
                  <el-input v-model="form.remark" placeholder="請輸入備註" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: center">
            <el-button
              type="primary"
              :disabled="btn_disable"
              @click="submitForm('20')"
              >提 交</el-button
            >
            <el-button
              type="primary"
              :disabled="btn_disable"
              @click="submitForm('10')"
              >保 存</el-button
            >
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-col>
      </el-row>

      <!-- 選擇入賬銀行 -->
      <el-dialog
        :visible.sync="dialog_if_bank"
        destroy-on-close
        :close-on-click-modal="false"
        width="1000px"
        append-to-body
      >
        <bank-table
          :selected="selected_bank_id"
          @out_detail="bank_detail"
          @out_cancel="bank_cancel"
          :type="bankType"
        >
        </bank-table>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script>
import bankTable from "@/components/biz/bankTable";
import {
  getAccountSubjectTree,
  getEntry,
  addEntry,
  updateEntry,
} from "@/api/biz/entry";

export default {
  name: "EntryAdd",
  components: { bankTable },
  dicts: [
    "account_entry_type",
    "customer_tag",
    "customer_source",
    "industry_type",
    "cart_type",
    "sys_user_sex",
    "customer_level",
    "bank_type",
  ],
  data() {
    return {
      btn_disable: false,
      // 表单參數
      form: {
        jAccountSubjectType: null,
        jAccountSubjectOne: null,
        jAccountSubjectTwo: null,
        dAccountSubjectType: null,
        dAccountSubjectOne: null,
        dAccountSubjectTwo: null,
        accountingPeriod: this.$moment().format("YYYYMM"),
      },
      // 表单校验
      rules: {},
      accountSubjectArr: [],

      BankNo_name: "銀行賬號",
      BankName_name: "賬戶名稱",
      // 選擇銀行詳細信息
      dialog_if_bank: false,
      selected_bank_id: "",
      bankType: "",
    };
  },
  created() {
    this.getAccountSubjectTree();
  },
  methods: {
    // 選擇銀行詳細信息----------------------------------
    open_dialog_bank() {
      this.dialog_if_bank = true;
    },
    bank_detail(item) {
      this.selected_bank_id = item.id;

      this.form.bankId = item.id;
      this.form.BankNo = item.bankNo;
      this.form.BankAccount = item.accountName;
      this.form.BankName = item.bankName;

      this.bank_cancel();
    },
    bank_cancel() {
      this.dialog_if_bank = false;
    },
    entryTypeChange(key) {
      console.log(key);
      this.form.BankNo = "";
      this.form.BankName = "";
      this.form.bankId = "";
      this.form.BankAccount = "";
      switch (key) {
        case "10":
          this.BankNo_name = "入賬銀行賬號";
          this.BankName_name = "入賬賬戶名稱";
          this.bankType = "10";
          break;
        case "20":
          this.BankNo_name = "出賬銀行賬號";
          this.BankName_name = "出賬賬戶名稱";
          this.bankType = "20";
          break;
        case "30":
          this.BankNo_name = "銀行賬號";
          this.BankName_name = "賬戶名稱";
          this.bankType = "40";
          break;

        default:
          break;
      }
    },
    queryASHandleChangeJ(subject) {
      console.log(subject);
      this.form.jAccountSubjectType = subject[0];
      this.form.jAccountSubjectOne = subject[1];
      this.form.jAccountSubjectTwo = subject[2];
    },
    queryASHandleChangeD(subject) {
      console.log(subject);
      this.form.dAccountSubjectType = subject[0];
      this.form.dAccountSubjectOne = subject[1];
      this.form.dAccountSubjectTwo = subject[2];
    },
    getAccountSubjectTree() {
      getAccountSubjectTree().then((response) => {
        this.accountSubjectArr = response.data;
      });
    },
    /** 提交按钮 */
    submitForm(type) {
      console.log(this.accountSubjectArr);
      this.form.entryStatus = type;
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btn_disable = true;
          addEntry(this.form)
            .then((response) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              this.$modal.msgSuccess("新增成功");
              this.$tab.closePage().then(() => {
                // 执行結束的逻辑
                const obj = { path: "/entry/index", name: "Entry" };
                this.$tab.refreshPage(obj);
              });
            })
            .catch((err) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              console.log(err);
            });
        }
      });
    },
    cancel() {
      this.$tab.closePage().then(() => {
        // 执行結束的逻辑
        const obj = { path: "/entry/index", name: "Entry" };
        this.$tab.refreshPage(obj);
      });
    },
  },
};
</script>

<style  >
.signType thead .el-table-column--selection .cell {
  display: none;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
  